<title>表单组合</title>
<style>
	#je_mall{display: flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items: center}
		#je_mall div{border-radius: 5px;border: 1px solid #3DB3F6;padding: 6px 20px;margin:10px 10px 0 0;}
		#je_mall div.active{background-color:#3DB3F6;}
			#je_mall div img{width: 40px;height: 40px;}
			#je_mall div span{margin-left: 20px;}


</style>
<div class="layui-card layadmin-header" style="height: 50px; line-height: 50px;">
	<div class="layui-breadcrumb" lay-filter="breadcrumb" style="padding: 0 15px;">
		<a lay-href="">商家中心</a>
		<a><cite>发布推广任务</cite></a>
	</div>
</div>

<script type="text/html" template>
<div class="layui-fluid jetee">
	<div class="layui-card">
		<h3 class="layui-card-header">发布推广任务-第一步 选择任务类型</h3>
		<div class="layui-card-body" style="padding: 15px;">
			<div class="layui-row">
				<div class="layui-col-lg10">
					<form class="layui-form" lay-filter="LAY-user-back-manage" onsubmit="return false;">
						<div class="layui-form-item">
							<h5 style="padding: 20px;font-weight: bold;">选择平台</h5>
							<div id="je_mall">
								{{#  layui.each(pidan['mall'], function(index, item){ }}
								<div data-mallid="{{ item['id'] }}"><img src="{{ item['logo'] }}"><span>{{ item['name'] }}</span></div>
								{{#  }); }}
							</div>
							<input id="je_mall1" type="hidden" name="mall">
						</div>
						<div class="layui-form-item" id="je_type">
							<h5 style="padding: 20px;font-weight: bold;">选择任务类型</h5>
							<label class="layui-form-label">请选择</label>
							<div class="layui-input-block" id="je_type1">
								{{#  layui.each(pidan['type'], function(index, item){ }}
									{{#  if(item['mall_id'] == 1){ }}
									<input type="radio" name="type" value="{{ item['id'] }}" title="{{ item['name'] }}">
									{{#  } }}
								{{#  }); }}
							</div>
							<div class="layui-input-block" id="je_type2">
								{{#  layui.each(pidan['type'], function(index, item){ }}
									{{#  if(item['mall_id'] == 2){ }}
									<input type="radio" name="type" value="{{ item['id'] }}" title="{{ item['name'] }}">
									{{#  } }}
								{{#  }); }}
							</div>
						</div>


						<div class="layui-form-item">
							<div class="layui-input-block">
								<div class="layui-footer">
									<button onclick="layui.common.storage('je_task_add',null);delete layui.je_task_add;location.hash='/task/add';location.reload();" class="layui-btn" type="button">重新开始</button> <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1"  type="button">下一步</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
</script>

<script>
layui.use(['admin', 'form', 'laydate'], function(){
	var $ = layui.$
	,admin = layui.admin
	,layer = layui.layer
	,form = layui.form
	,view = layui.view
	,je=layui.common;
	//重开页面载入数据
	if(!layui.je_task_add){
		//先从本地取  没有再从服务器取
		layui.je_task_add=je.storage('je_task_add');
		//如果第一步没值  且已经做过第一步了,就去取值
		if(!layui.je_task_add  && je.hash('maxstep')>=1){
			admin.req({
				url: './task/get'
				,type: 'post'
				,data: {id:je.hash('id')}
				,done: function(res){
					je.storage('je_task_add',res.data);
					//如果有值
					if(res.data[1])	location.reload();
				}
			});
		}
	}


	form.render(null, 'LAY-user-back-manage');

	setTimeout(function(){
		//平台
		je_mall_nav();
		//$('#je_mall>div:first').click();//选择平台
		//显示第一个平台类型
		je_select_type(1);//不选平台

		//重载
		if(layui.je_task_add && layui.je_task_add[1]){
			$('#je_mall>div:eq('+(layui.je_task_add[1].mall_id-1)+')').click();
			form.val("LAY-user-back-manage", {
				"mall": layui.je_task_add[1].mall_id,
				"type": layui.je_task_add[1].type_id
			});
		}
		/*
		form.val("LAY-user-back-manage", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
			"type": 1,
			"modules":16
		});
		//获取表单区域所有值
		//var data1 = form.val("formTest");

		 */
	},100);



	// 提交  本地记录task临时id
	form.on('submit(component-form-demo1)', function(data){
		let field=data.field;
		debug1(field);
		if(je.empty(field.mall)){
			view.error1('请选择平台');
			return;
		}
		if(je.empty(field.type)){
			view.error1('请选选择任务类型');
			return;
		}
		//生成临时信息记录
		admin.req({
			url: './task/add1'
			,type: 'get'
			,data:field
			,done: function(res){
				if(layui.je_task_add==null){
					layui.je_task_add=[{step:1,maxstep:1,id:res.data.id}];
				}else{
					layui.je_task_add[0].step=1;
					layui.je_task_add[0].maxstep>1 ? '' : layui.je_task_add[0].maxstep=1;
					layui.je_task_add[0].id=res.data.id;
				}
				layui.je_task_add[1]=res.data;
				je.storage('je_task_add',layui.je_task_add);
				//跳转到下一步
				location.hash = '/task/add2';
			}
		});

		return false;
	});


	//点选变色  显示对应平台类型
	function je_mall_nav(){
		var select=$('#je_mall>div');
		$.each(select, function(i, n){
			$(n).click(function () {
				let that=$(this),mallid=that.data('mallid');
				select.removeClass("active");
				that.addClass("active");

				$('#je_mall1').val(mallid);
				je_select_type(mallid);

			})
		});
	}
	//点击显示平台任务类型
	function je_select_type(mallid){
		$('#je_type input').removeAttr('checked');
		//$('#je_type'+mallid+'>input:first').attr('checked','checked');
		$('#je_type>div').hide();
		$('#je_type'+mallid).show();
		form.render('radio');
	}

});
</script>